<template>
	<!-- 导航 -->
	<section class='commonComment' :class="type=='video'?'videoComment':''">
		<div class='commentNum'>
			<span class="iconfont icon-Close-small" @click="closeClick"></span>
		</div>
	</section>

</template>

<script>
	import { defineAsyncComponent } from 'vue';
	export default {
		components: {
			
		},
		props: ['sss', 'type'],
		data() {
			return {
				commnent: '',
				src: 'https://demo.jeecms.com/u/cms/www/2023/08/04/1687338852483710979.png',
				addNewComment:false,
				query: GetQueryString(),
				total:0,
				isNeedLogin:sessionStorage.commentSet,
				useInfo:localStorage.userInfo,
			}
		},
		created() {
		},
		mounted(){
		
		},
		methods: {
			setNumber(val) {
				let value = val;
				if (value >= 1000) {
					value = value / 1000 + 'K';
				} else if (value >= 10000) {
					value = value / 1000 + 'W';
				}
				return value
			},
			submitComment() {
			  console.log(this.commnent, 'this.commnent')
				if (!this.commnent) {
					return;
				}
				let param = {
					contentId:this.query.id,
					type:1,
					commentId:undefined,
					comment:this.commnent,
				}
				contentApi.addComment(param, res => {
					if(res.code=='00000 00000'){
						//this.replayCommentList.splice(index, 1);
						this.addNewComment = true;
						this.commnent = '';
					}
				});
			},
			newCommentFinished(){
				this.addNewComment = false;
			},
			getTotal(val){
				this.total = val;
				this.$emit('getTotal', val);
			},
			gotoLogin(){ // 去登陆
				gotoLogin(1);
			},
			closeClick(){
				this.$emit('closeClick', false)
			}
			
		}
	}
</script>

<style>
.commonComment {
  width: 100%;
}
.commonComment .commentNum{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
}
.commonComment .commentNum .iconfont{
  font-size: 24px;
	color: #fff;
}
.commonComment .comment_num{
	font-size: 20px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #E8E8E8;
	line-height: 20px;
}
.commonComment .input_comment {
  display: flex;
  width: 100%;
  margin-bottom: 40px;
  position: relative;
}

.commonComment .input_comment .input_comment_img_content {
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 100%;
  position: relative;
  margin-right: 12px;
}

.commonComment .input_comment .input_comment_img_content .input_comment_img {
  width: 100%;
  height: 100%;
}

.commonComment .input_comment .textArea {
  flex: 1;
  height: 100px;
  background: #F8F8F8;
  border-radius: 4px;
  border: none;
  outline: none;
  padding: 16px;
  resize: none;
  box-sizing: border-box;
}

.commonComment .input_comment .submitBtn {
  width: 60px;
  height: 32px;
  background: #CCCCCC;
  border-radius: 4px;
  position: absolute;
  bottom: 16px;
  right: 16px;
  border: none;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 14px;
}
.videoComment .input_comment .submitBtn {
  background: #444444;
  color: #BBBBBB;
}
.commonComment .input_comment .canSubmit {
  background: #FF3333;
	color:#fff;
}

.commonComment .input_comment .canSubmit:hover {
  background: #FF4747;
}

.commonComment .input_comment .canSubmit:active {
  background: #F23030;
}
.commonComment .loadMoreComment .iconfont {
  margin-left: 8px;
}


.commonComment .input_comment .needLogin {
	font-size: 16px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
	line-height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.commonComment .input_comment .needLogin span{
	color: #FF3333;
	margin: 0 8px;
	cursor: pointer;
}
.videoComment .input_comment .needLogin{
	background:#2C2C2C;
}


.videoComment .loadMoreComment {
  background: #333333;
  color: #E8E8E8;
}
.videoComment .commentLists{
	max-height: calc(100% - 268px);
	overflow: auto;
}
</style>